<template>
  <div class="seller" ref="sellerView">
    <div class="seller-wrapper">

      <Split></Split>

      <div class="seller-view">
        <div class="address-wrapper">
          <div class="address-left">
            {{seller.address}}
          </div>
          <div class="address-right">
            <div class="content"></div>
          </div>
        </div>

        <div class="pics-wrapper" v-if="seller.poi_env" ref="picsView">
          <ul class="pics-list" ref="picsList">
            <li ref="picsItem"
              class="pics-item"
              v-for="(imgurl,index) in seller.poi_env.thumbnails_url_list"
              :key="index"
            >
              <img :src="imgurl">

            </li>
          </ul>
        </div>

        <div class="safety-wrapper">
          查看食品安全档案
          <span class="icon-keyboard_arrow_right"></span>
        </div>
      </div>

      <Split></Split>
      <div class="tip-wrapper">
        <div class="delivery-wrapper">
          配送服务：{{seller.app_delivery_tip}}
        </div>
        <div class="shipping-wrapper">
          配送时间：{{seller.shipping_time}}
        </div>
      </div>

      <Split></Split>
      <div class="other-wrapper">
        <div class="server-wrapper">
          商家服务
          <div
              class="poi-server"
              v-for="(item,index) in seller.poi_service"
              :key="index"
          >
            <img :src="item.icon">{{item.content}}
          </div>
        </div>
        <div class="discounts-wrapper">
          <div
            class="discounts-item"
            v-for="(item,index) in seller.discounts2"
            :key="index"
          >
            <div class="icon">
              <img :src="item.icon_url">
            </div>
            <div class="text">
              {{item.info}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<!--<template>-->
  <!--<div class="seller" ref="sellerView">-->
    <!--<div class="seller-wrapper">-->
      <!--<Split></Split>-->
      <!--<div class="seller-view">-->
        <!--<div class="address-wrapper">-->
          <!--<div class="address-left">-->
            <!--{{seller.address}}-->
          <!--</div>-->
          <!--<div class="address-right">-->
            <!--<div class="content"></div>-->
          <!--</div>-->
        <!--</div>-->

        <!--<div class="pics-wrapper" v-if="seller.poi_env" ref="picsView">-->
          <!--<ul class="pics-list" ref="picsList">-->
            <!--<li-->
              <!--ref="picsItem"-->
              <!--class="pics-item"-->
              <!--v-for="(imgurl,index) in seller.poi_env.thumbnails_url_list"-->
              <!--:key="index"-->
            <!--&gt;-->
              <!--<img :src="imgurl">-->
            <!--</li>-->
          <!--</ul>-->
        <!--</div>-->

        <!--<div class="safety-wrapper">-->
          <!--查看食品安全档案-->
          <!--<span class="icon-keyboard_arrow_right"></span>-->
        <!--</div>-->
      <!--</div>-->

      <!--<Split></Split>-->
      <!--<div class="tip-wrapper">-->
        <!--<div class="delivery-wrapper">-->
          <!--配送服务: {{seller.app_delivery_tip}}-->
        <!--</div>-->

        <!--<div class="shipping-wrapper">-->
          <!--配送时间: {{seller.shipping_time}}-->
        <!--</div>-->
      <!--</div>-->

      <!--<Split></Split>-->
      <!--<div class="other-wrapper">-->
        <!--<div class="server-wrapper">-->
          <!--商家服务-->
          <!--<div-->
            <!--class="poi-server"-->
            <!--v-for="(item,index) in seller.poi_service"-->
            <!--:key="index"-->
          <!--&gt;-->
            <!--<img :src="item.icon" > {{item.content}}-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="discounts-wrapper">-->
          <!--<div-->
            <!--class="discounts-item"-->
            <!--v-for="(item,index) in seller.discounts2"-->
            <!--:key="index"-->
          <!--&gt;-->
            <!--<div class="icon">-->
              <!--<img :src="item.icon_url">-->
            <!--</div>-->
            <!--<div class="text">-->
              <!--{{item.info}}-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
  <!--</div>-->
<!--</template>-->
<script>
  import Split from '../split/Split'
  import BScroll from 'better-scroll'
    export default {
      name: "Seller",
      data(){
        return{
          seller:{},
          scroll:''
        }
      },
      created(){
        fetch("/api/seller")
          .then(res => {
            return res.json()
          })
          .then(response => {
            // console.log(response)
            if (response.code == 0) {
              this.seller= response.data
              // console.log(this.ratings)
              // this.$nextTick(()=>{
              //
              // })
            }
          })
      },
      components:{
        Split
      },
      updated(){
        this.$nextTick(()=>{
          if(this.seller.poi_env.thumbnails_url_list){
            let imgW = this.$refs.picsItem[0].clientWidth
            let marginR = 11
            let width = (imgW + marginR) * this.seller.poi_env.thumbnails_url_list.length

            this.$refs.picsList.style.width = width + "px"

            this.scroll = new BScroll(this.$refs.picsView,{
              scrollX:true
            })
          }
          this.sellerView=new BScroll(this.$refs.sellerView)
        })

      }
    }
</script>

<style scoped>
  .seller {
    position: absolute;
    left: 0;
    top: 191px;
    bottom: 0px;
    width: 100%;
    background: #F4F4F4;
    overflow: hidden;
  }

  .seller .seller-wrapper {
    background: white;
  }

  .seller .seller-wrapper .seller-view {
    padding-left: 15px;
  }

  .seller .seller-wrapper .seller-view .address-wrapper {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #F4F4F4;
  }

  .seller .seller-wrapper .seller-view .address-wrapper .address-left {
    flex: 1;
    background: url(address.png) no-repeat left center;
    padding-left: 26px;
    padding-right: 31px;
    background-size: 14px 16px;
    font-size: 14px;
    line-height: 19px;
  }

  .seller .seller-wrapper .seller-view .address-wrapper .address-right {
    flex: 0 0 60px;
    background: url(line.png) no-repeat left center;
    background-size: 1px 15px;
  }

  .seller .seller-wrapper .seller-view .address-wrapper .address-right .content {
    width: 100%;
    height: 100%;
    background: url(phone.png) no-repeat center center;
    background-size: 18px 18px;
  }

  .seller .seller-wrapper .seller-view .pics-wrapper {
    padding: 10px 0;
    overflow: hidden;
    border-bottom: 1px solid #F4F4F4;
    white-space: nowrap;
  }

  .seller .seller-wrapper .seller-view .pics-wrapper .pics-list {}

  .seller .seller-wrapper .seller-view .pics-wrapper .pics-list .pics-item {
    display: inline-block;
    margin-right: 11px;
    width: 93px;
    height: 75px;
  }

  .seller .seller-wrapper .seller-view .pics-wrapper .pics-list .pics-item img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }

  .seller .seller-wrapper .seller-view .safety-wrapper {
    padding: 15px 14px 15px 25px;
    background: url(safety.png) no-repeat left center;
    background-size: 14px 16px;
    font-size: 14px;
  }

  .seller .seller-wrapper .seller-view .safety-wrapper span {
    float: right;
    font-size: 14px;
  }

  .seller .seller-wrapper .tip-wrapper {
    padding-left: 15px;
  }

  .seller .seller-wrapper .tip-wrapper .delivery-wrapper {
    background: url(delivery.png) no-repeat left center;
    background-size: 14px 16px;
    padding: 15px 0 15px 25px;
    font-size: 14px;
    border-bottom: 1px solid #F4F4F4;
  }

  .seller .seller-wrapper .tip-wrapper .shipping-wrapper {
    background: url(time.png) no-repeat left center;
    padding: 15px 17px 15px 25px;
    background-size: 15px 15px;
    font-size: 14px;
    line-height: 18px;
  }

  .seller .seller-wrapper .other-wrapper {
    padding-left: 15px;
  }

  .seller .seller-wrapper .other-wrapper .server-wrapper {
    background: url(server.png) no-repeat left center;
    background-size: 15px 15px;
    padding: 15px 0 17px 25px;
    font-size: 14px;
    border-bottom: 1px solid #F4F4F4;
  }

  .seller .seller-wrapper .other-wrapper .server-wrapper .poi-server {
    display: inline-block;
    margin-left: 17px;
  }

  .seller .seller-wrapper .other-wrapper .server-wrapper .poi-server img {
    width: 15px;
    height: 15px;
    margin-right: 6px;
    vertical-align: middle;
  }

  .seller .seller-wrapper .other-wrapper .discounts-wrapper {
    padding: 17px 24px 19px 0;
  }

  .seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item {
    display: flex;
  }

  .seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item .icon {
    flex: 0 0 25px;
  }

  .seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item .icon img {
    width: 15px;
    height: 15px;
  }

  .seller .seller-wrapper .other-wrapper .discounts-wrapper .discounts-item .text {
    flex: 1;
    font-size: 14px;
  }
</style>
